<template>
    <div>
        <div v-if="orderList && orderList.length > 0">
            <div style="border-bottom: 1px solid #EEEEEE;text-align: left;" v-for="oi in orderList" v-bind:key="oi.id">
                <table style="width: 100%;">
                    <tr>
                        <td colspan="3" class="asheng-margin"></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="asheng-good-name">{{ oi.goodName ? oi.goodName : "" }}</td>
                        <td class="asheng-order-detail-btn"><span @click="onClickOrderDetail(oi)">详情<van-icon
                                    name="arrow" /></span></td>
                    </tr>
                    <tr>
                        <td colspan="3" class="asheng-margin" style="height: 0px;"></td>
                    </tr>
                    <tr>
                        <td>
                            <div :id="'cardname' + oi.id" @click="copyOrderContent(oi.cardName, 'cardname' + oi.id)">
                                <span class="asheng-title">姓名：</span>
                                <span class="asheng-val">{{ oi.cardName ? oi.cardName : "" }}</span>
                            </div>
                            <div :id="'phone' + oi.id" @click="copyOrderContent(oi.receiverPhone, 'phone' + oi.id)">
                                <span class="asheng-title">电话：</span>
                                <span class="asheng-val">{{ oi.receiverPhone ? oi.receiverPhone : "" }}</span>
                            </div>
                            <div :id="'recommend' + oi.id"
                                @click="copyOrderContent(oi.recommendNickName, 'recommend' + oi.id)">
                                <span class="asheng-title">推荐：</span>
                                <span class="asheng-val">{{ oi.recommendNickName ? oi.recommendNickName : "" }}</span>
                            </div>
                        </td>
                        <td>
                            <div :id="'orderid' + oi.id" @click="copyOrderContent(oi.gthOrderId, 'orderid' + oi.id)">
                                <span class="asheng-title">订单ID：</span>
                                <span class="asheng-val">{{ oi.gthOrderId ? oi.gthOrderId : "无" }}</span>
                            </div>
                            <div :id="'orderno' + oi.id" @click="copyOrderContent(oi.orderNo, 'orderno' + oi.id)">
                                <span class="asheng-title">外部ID：</span>
                                <span :title="oi.orderNo" class="asheng-val">{{ oi.orderNo ? oi.orderNo.substr(0, 10) +
                                    "..." :
                                    ""
                                }}</span>
                            </div>
                            <div>
                                <span class="asheng-val">{{ oi.gthCreatedAt ? oi.gthCreatedAt : "" }}</span>
                            </div>
                        </td>
                        <td style="width: 60px;">
                            <div class="asheng-order-status">
                                <img v-if="oi.activateStatus === 100 || oi.activateStatus === 200"
                                    src="../../assets/image/comm/activied.png">
                                <template v-else>
                                    <img v-if="oi.orderStatus === 99 || oi.orderStatus === 500"
                                        src="../../assets/image/comm/not_s.png">
                                    <img v-else-if="oi.orderStatus === 550" src="../../assets/image/comm/yes_s.png">
                                    <img v-else-if="oi.orderStatus === -99 || oi.orderStatus === -460"
                                        src="../../assets/image/comm/fail.png">
                                    <img v-else src="../../assets/image/comm/other.png">
                                </template>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" class="asheng-margin"></td>
                    </tr>
                </table>
            </div>

        </div>
        <div v-else>
            <van-empty description="暂无数据" />
            <div style="height: 500px;"></div>
        </div>
        <div style="color: #969799;line-height: 50px;text-align: center;font-size: 13px;"
            v-if="finished && orderList.length > 0">没有更多了
        </div>


    </div>
</template>

<script>
import { showToast } from 'vant'
import { listOrder } from '@/api/seller/order'
export default {
    name: "OrderItem",
    props: {
        status: {
            type: Number
        },
        searchKey: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            orderList: [],
            queryPara: {
                pageNum: 1,
                pageSize: 15,
            },
            total: 0,
            maxPage: 0,
            loading: false,
            finished: false
        }
    },
    created() {
        this.initCurrPage()
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll, true);
    },
    methods: {
        initCurrPage() {
            if (this.status != 999) {
                this.queryPara.orderStatus = this.status
            }

            this.queryPara.searchValue = this.searchKey
            this.getOrderList()
        },
        getOrderList() {
            listOrder(this.queryPara).then(res => {
                this.orderList = this.orderList.concat(res.rows)
                this.total = res.total
                this.getMaxPage()
                if (this.maxPage <= this.queryPara.pageNum) {
                    this.finished = true
                }
            })
        },
        handleScroll() {
            //变量scrollTop是滚动条滚动时，距离顶部的距离
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //变量windowHeight是可视区的高度
            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //变量scrollHeight是滚动条的总高度
            var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            //console.info("距离顶部的距离", scrollTop)
            //console.info("可视区的高度", windowHeight)
            //console.info("滚动条的总高度", scrollHeight)
            //滚动条到底部的条件
            if (scrollTop + windowHeight + 2 >= scrollHeight) {
                //到了这个就可以进行业务逻辑加载后台数据了
                this.onLoadList()
            }
        },
        onLoadList() {
            if (!this.finished) {
                this.getMaxPage()

                if (this.queryPara.pageNum < this.maxPage) {
                    this.queryPara.pageNum++;
                }

                this.getOrderList();
                console.info("maxPage", this.maxPage)
            } else {
                console.info("已完成所有数据的加载")
            }
        },
        getMaxPage() {
            let maxPage = Math.floor(this.total / this.queryPara.pageSize);
            let remainder = this.total % this.queryPara.pageSize;
            if (remainder > 0) {
                this.maxPage = maxPage + 1;
            } else {
                this.maxPage = maxPage
            }
        },
        copyOrderContent(content, idName) {
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(content)
                showToast("复制成功");
            } else {
                window.getSelection().removeAllRanges()
                const questionToCopy = document.querySelector('#' + idName)
                const range = document.createRange()
                range.selectNode(questionToCopy)
                window.getSelection().addRange(range)
                try {
                    const successful = document.execCommand('copy')
                    if (successful) {
                        showToast("复制成功");
                    }
                } catch (error) {
                    showToast("复制失败");
                }
            }
        },
        onClickOrderDetail(item) {
            this.$emit("onClickOrderDetail", item)
        }
    }
}
</script>
<style scoped>
table,
tr,
td {
    border: 0px;
}

.asheng-good-name {
    font-size: 14px;
    color: #000000;
    font-weight: normal;
}

.asheng-title {
    color: #666;
    font-size: 13px;
    font-weight: normal;
}

.asheng-val {
    color: #000000;
    font-size: 13px;
    font-weight: normal;
}

.asheng-order-status {
    height: 60px;
    width: 60px;
}

.asheng-order-status img {
    height: 60px;
    width: 60px;
}

.asheng-margin {
    height: 5px;
}

.asheng-order-detail-btn {
    font-size: 14px;
    color: #3682FF;
    font-weight: normal;
    cursor: pointer;
    text-align: right;
}
</style>

